<!--  -->
<template>
  <div class="mycenter container">
    <div class="center-left">
      <ul>
        <li @click="$router.push('/mycenter/account')" class="main-account" :class="{active:this.$route.path === '/mycenter/account'? true:false}">账号信息</li>
        <li @click="$router.push('/mycenter/address')" class="main-address" :class="{active:this.$route.path === '/mycenter/address'? true:false}">我的地址</li>
        <li @click="$router.push('/mycenter/sefaty')" class="main-sefaty" :class="{active:this.$route.path === '/mycenter/sefaty'? true:false}">安全信息</li>
      </ul>
    </div>
    <aside class="aside">
      <router-view></router-view>
      <div v-show="$route.path === '/mycenter'? true:false">
        <Account/>
        <Addresst/>
        <Sefaty/>
      </div>
    </aside>
  </div>
</template>
<script>
import Account from '../components/mycenter/Account'
import Addresst from '../components/mycenter/Address'
import Sefaty from '../components/mycenter/Sefaty'
export default {
  name:'Mycenter',
  data () {
    return {
    };
  },
  components:{
    Account,Addresst,Sefaty
  }
}

</script>
<style lang='less' scoped>
@import "../assets/css/total";
.mycenter{
  display: flex;
  .center-left{
    background-color: rgb(228, 224, 224);
    box-sizing: border-box;
    width: 200px;
    ul{
      li{
        height: 40px;
        font-weight: 700;
        font-size: 30px;
        text-align: center;
        padding: 10px;
        cursor: pointer;
        
      }
      .main-account,.main-address,.main-sefaty{
         &:hover{
           background-color: rgb(212, 66, 22);
           color: white;
           font-size: 33px;
         } 
         &.active{
           background-color: rgb(212, 66, 22);
           color: white;
           font-size: 33px;
         }
        }
    }
  }
  .aside{
    margin-left:10px ;
    width: 1000px;
  }
}
</style>